<template>
	<view>
		<u-grid :border="false" col="3" >
		    <u-grid-item v-for="(item,inx) in listData" :key="inx"   :bgColor="item.isCheck ? '#dd6161' : '#f4f3f2'" :customStyle="{width:'30%',marginRight:'2%',borderRadius:'10rpx',padding:'20rpx',marginTop:'10rpx',color:(item.isCheck ?'#FFFFFF' :'#000000')}" @click="checkGrid(item)">
				<view class="selectnum">
					<view class="selectnum__li ">
						<view class="selectnum__li__nub">{{item.title}}</view>
						<view class="selectnum__li__xiao" v-if="item.rate > 0">{{item.rate}}</view>
						<view class="selectnum__li__xiao" v-else>{{rulesInfo.rate}}</view>
					</view>
				</view>
		    </u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import {combination} from '@/utils/utils.js'
	export default {
		name:'lhc-liangmian',
		props:{
			rulesInfo:{
				type:Object,
				default: () => {
				    return {};
				}
				
			},
			isAddOrder:{
				type:Boolean,
				default: () => {
				    return false;
				}
				
			}
		},
		data() {
			return {
				checkList:[],
				listData:[]
			}
		},
		watch:{
			isAddOrder(val){
				if(val){
					this.onAddOrder();
				}
			},
			rulesInfo(val){
				this.initList();
			}
		},
		mounted() {
			this.initList();
		},
		methods: {
			initList(){
				this.checkList = [];
				this.listData = [];
				let children = JSON.parse(JSON.stringify(this.rulesInfo.children));
				children.map(item=>{
					item.isCheck = false;
					this.listData.push(item);
				})
				
			},
			checkGrid(item){
				item.isCheck = !item.isCheck;
				if(item.isCheck) {
					this.checkList.push({
						color : '',
						nub : item.title,
						title : '',
						key : 0,
						betting_rate:item.rate,
						betting_max_rate:item.max_rate,
					});
				}else{
					for(var i in this.checkList) {
						if(this.checkList[i].nub == item.title) {
							this.checkList.splice(i,1);
							break;
						}
					}
				}
			},
			onAddOrder(){
				if(this.checkList.length < this.rulesInfo.zhu) {
					this.$emit('click',false,{message:'请选择'+this.rulesInfo.zhu+'个或'+this.rulesInfo.zhu+'以上'});
					return false;
				}
				let arr = {};
				this.checkList.map(item=>{
					if(arr[item.betting_rate]) {
						arr[item.betting_rate].push(item);
					}else{
						arr[item.betting_rate] = [];
						arr[item.betting_rate].push(item);
					}
				});
				for(var i in arr) {
					let betting_code = JSON.parse(JSON.stringify(arr[i]));
					let amount = combination(betting_code,this.rulesInfo.zhu).length;
					let money = this.rulesInfo.min_consume;
					let total_money = (parseFloat(money) * parseInt(amount));
					
					let  obj = {
						betting_code:betting_code,
						alias:this.rulesInfo.alias,
						betting_rate: arr[i][0].betting_rate > 0 ? arr[i][0].betting_rate : this.rulesInfo.rate,
						betting_max_rate:arr[i][0].betting_max_rate > 0 ? arr[i][0].betting_max_rate : this.rulesInfo.max_rate,
						pid:this.rulesInfo.pid,
						typeid:this.rulesInfo.typeid,
						title:this.rulesInfo.title,
						pid_name:this.rulesInfo.pid_name,
						multiple:1,
						amount:amount,
						money:money,
						total_money:total_money,
					}
					
					this.$emit('click',true,obj);
				}
				
				this.initList();
				
			}
		}
	}
</script>

<style lang="less">
.selectnum{
	height: 120rpx;
	&__li{
		float: left;
		height: 82rpx;
		width: 84rpx;
		&__nub{
			background: rgba(0, 0, 0, 0) none repeat scroll 0 center;
			border: 0 none;
			font-size: 28rpx;
			text-align: center;
			font-weight: bold;
			line-height: 84rpx;
		}
		&__xiao{
			font-weight: bold;
			display: inline-block;
			width: 100%;
			font-size: 25rpx;
			text-align: center;
			line-height: 36rpx;
		}
	}
	
}

</style>
